<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<meta charset="UTF-8">
<head th:replace="back/index::ph('我的作业')"></head>
<body>
	<header th:replace="back/index::header"></header>
	<main>
		<div class="content">
			<div class="layui-row">
				<div class="layui-col-md12">
					<ul v-if="list.length" class="layui-timeline">
						<li v-for="t in list" class="layui-timeline-item layui-clear">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
							<div class="layui-timeline-content layui-text">
								<h3 class="layui-timeline-title" style="padding-right: 20px">
									{{t.taskInTime}} - {{t.taskName}}
									<button class="layui-btn layui-btn-sm" style="float: right">提交作业</button>
								</h3>
								<p v-html="t.intro"></p>
							</div>
						</li>
					</ul>
					<h3 v-else>没有作业</h3>
				</div>
				<!-- <div class="layui-col-md4">
					<div>排行榜1</div>
					<div>排行榜2</div>
					<div>排行榜3</div>
				</div> -->
			</div>
			<!-- <fieldset>
				<legend>
					<a href="/">首页</a> >> 我的作业
				</legend>
				<div style="height: 100%">
					<div style="float: right; width:350px; height: 100%; overflow: auto;">
						<div class="hw" v-for="(t,i) in list" @click="selected=i"
							:style="{'background-color':i==selected?'#bbc':''}">
							<div class="hw-top">
								<h5>{{t.taskName}}</h5>
								<time>{{t.finishAt}}</time>
								<hr>
								<div>{{t.intro}}</div>
								<hr>
							</div>
							<div class="hw-btm">
								<button @click="commit(t.taskId)">提交</button>
							</div>
						</div>
					</div>
					<div class="form" style="float: left; width:600px; height: 100%;"
						:style="{backgroundColor: selected>-1?'#bbc':''}">
						<div v-if="selected>-1">
							<choose label="进度" model="progress" :items="prgItems" vf="v" nf="l"></choose>
							<intext label="仓库" model="git"></intext>
							<intext label="日志" model="log"></intext>
							<div style="border: 1px #888 solid; border-radius: 5px; padding: 3px;overflow: auto;max-height: 300px">
							<input type="file" id="file" style="display: none;" @change="upfile">
							<input type="text" v-model="pic" style="display: none;">
							<img id="img" src="img/yangli.png" width="96%" onclick="file.click()">
							</div>
							点击图片上传案例完成效果图或代码截图
							<div>
								<button @click="commit">提交</button>
							</div>
						</div>
					</div>
				</div>
			</fieldset> -->
		</div>
	</main>
	<footer th:replace="back/index::footer"></footer>
</body>
<script type="text/javascript">
	var v = new Vue({
		el : ".content",
		data : { 
			list : [],
			selected : -1,
			prgItems : [],
			git : "",
			progress : 0,
			log : "",
			pic : ""
		},
		created(){
			for(let i =0 ; i<11; i++){
				this.prgItems.push({v:i*10+"",l:i*10+'%'});
			}
			axios.get("mytask").then(res=>{
				this.list = res.data.data;
				this.selected = this.list.length>0 ? 0 : -1;
			})
		},
		methods : {
			commit(){
				var p = usp(this.$data,"list","","selected","","prgItems","");
				p.append("task.id", this.list[this.selected].taskId);
				axios.post("commit", p).then(res=>{
					alert(res.data.msg);
					if(res.data.code!=1){
						console.info(res.data);
					}
				});
			},
			upfile(){
				var fd = new FormData();
				fd.append("file",file.files[0]);
				axios.post("upload", fd).then(res=>{
					if(res.data.code!=1){
						alert(res.data.msg);
						console.info(res.data);
					} else {
						this.pic = img.src = res.data.data;
					}
				})
			}
		}
	})
</script>
</html>